<template>
  <view class="teacher-card card-common" @click="navigateToEdit">
    <view class="card-container flex-row">
      <!-- 左侧头像 -->
      <view class="avatar-container">
        <image
          class="teacher-avatar"
          :src="
            teacher.avatar ? config.baseURL + teacher.avatar : config.baseURL + config.defaultAvatar
          "
        ></image>
      </view>

      <!-- 右侧信息区域 -->
      <view class="info-container flex-col">
        <!-- 顶部信息：姓名和性别 -->
        <view class="top-info flex-col">
          <view class="teacher-name">{{ teacher.teacherName }}</view>
          <view class="teacher-gender">{{ teacher.gender === '0' ? '男' : '女' }}</view>
        </view>

        <!-- 中间信息：电话、状态等 -->
        <view class="middle-info flex-col">
          <view class="content-item flex-row">
            <text class="item-label">电话:</text>
            <text class="item-value">{{ teacher.teacherPhone }}</text>
          </view>
          <view class="content-item flex-row">
            <text class="item-label">状态:</text>
            <text class="item-value">{{ teacher.isEmployment === 'Y' ? '在职' : '离职' }}</text>
          </view>
          <view class="content-item flex-row">
            <text class="item-label">入职时间:</text>
            <text class="item-value">{{ teacher.employmentDate }}</text>
          </view>
          <view class="content-item flex-row" v-if="teacher.isEmployment !== 'Y'">
            <text class="item-label">离职时间:</text>
            <text class="item-value">{{ teacher.resignationTime }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部编辑按钮 -->
    <view class="card-footer flex-row justify-end">
      <button class="btn-common btn-edit" size="mini" @click.stop="navigateToEdit">编辑</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import type { TeacherItem } from '@/types/teacher'
import { config } from '@/global'

const props = defineProps<{
  teacher: TeacherItem
}>()

const navigateToEdit = () => {
  const teacher = props.teacher
  uni.navigateTo({
    url: `/pagesOrgan/teacher/edit?id=${teacher.id}`,
  })
}
</script>

<style scoped lang="scss">
.teacher-card {
  padding: 20rpx;
  margin-bottom: 16rpx;
  background-color: #fff;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

  .card-container {
    width: 100%;
    align-items: center; // 添加此行使子元素垂直居中

    .avatar-container {
      margin-right: 60rpx;
      flex-shrink: 0;

      .teacher-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
    }

    .info-container {
      flex: 1;
      justify-content: space-between;

      .top-info {
        margin-bottom: 10rpx;

        .teacher-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 4rpx;
        }

        .teacher-gender {
          font-size: 26rpx;
          color: #666;
        }
      }

      .middle-info {
        .content-item {
          margin-bottom: 6rpx;

          .item-label {
            width: 150rpx;
            font-size: 26rpx;
            color: #999;
          }

          .item-value {
            flex: 1;
            font-size: 26rpx;
            color: #333;
          }
        }
      }
    }
  }

  .card-footer {
    margin-top: 16rpx;

    .btn-edit {
      color: #409eff;
      background-color: rgba(64, 158, 255, 0.1);
    }
  }
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-end {
  justify-content: flex-end;
}
</style>
